window.onload = function () {
    var oCon = document.querySelector('.filter-con');
    var oUl = oCon.querySelector('ul');
    var oFilterTitle = document.querySelector('.filter > div');
    var oSchool = document.querySelector('.school');
    var aA = oCon.querySelectorAll('a');
    var oldY = 0;
    var diffY = 0;
    var diffT = 0;
    var count = 0;
    var onOff = true;
    // var num = 20 * (document.documentElement.clientWidth / 320) / 40;
    // var oUlHeight = (-oUl.clientHeight) * num + (oCon.clientHeight) * num;
    var oUlHeight = 0;
    var oConTop = getTop(oSchool);

    oFilterTitle.addEventListener('touchend', function () {
        if (onOff) {
            this.className = 'active';
            oCon.style.top = oConTop + 'px';
            oCon.style.display = 'block';
            oUlHeight = -oUl.clientHeight + oCon.clientHeight;
            addDom();
            document.documentElement.addEventListener('touchmove', moveUl, false);
            document.documentElement.addEventListener('touchend', resetUl, false);
            document.querySelector('.newDom').addEventListener('click', function () {
                clearCon();
                onOff = !onOff;
            }, false);
        } else {
            clearCon();
        }
        console.log(1);
        onOff = !onOff;
    }, false);

    var oldA = null;
    for(var i = 0, length1 = aA.length; i < length1; i++){
        aA[i].addEventListener('click', function () {
            this.className = 'active';
            if (oldA) oldA.className = '';
            oldA = this;
            onOff = !onOff;
            clearCon();
        }, false);
    }

    function clearCon() {
        oCon.style.display = 'none';
        oFilterTitle.className = '';
        document.documentElement.removeEventListener('touchmove', moveUl, false);
        document.documentElement.removeEventListener('touchend', resetUl, false);
        delDom();
    }

    function moveUl() {
        event.preventDefault();
        if (count == 0) {
            oldY = event.changedTouches[0].screenY;
            console.log('startOldY: ' + oldY);
            count++;
        }
        if (event.target.type == 'city') {
            console.log('screenY: ' + event.changedTouches[0].screenY);
            diffY = event.changedTouches[0].screenY - oldY;
            console.log(diffY);
            diffT += diffY;
            oldY = event.changedTouches[0].screenY;
        }
        if (diffT > 30) {
            diffT = 30;
        }
        if (diffT < (oUlHeight - 30)) {
            diffT = (oUlHeight - 30);
        }
        oUl.style.transform = 'translate3d(0px, '+ diffT +'px, 0px)';
    }

    function resetUl() {
        var oTime = null;
        oldY = 0;
        count = 0;
        clearInterval(oTime);
        if (diffT > 0) {
            oTime = setInterval(function () {
                if (diffT <= 0) {
                    diffT = 0;
                    clearInterval(oTime);
                    oUl.style.transform = 'translate3d(0px, '+ diffT +'px, 0px)';
                } else {
                    diffT -= 10;
                    oUl.style.transform = 'translate3d(0px, '+ diffT +'px, 0px)';
                }
            }, 30);
        }
        if (diffT < oUlHeight) {
            oTime = setInterval(function () {
                if (diffT >= oUlHeight) {
                    diffT = oUlHeight;
                    clearInterval(oTime);
                    oUl.style.transform = 'translate3d(0px, '+ diffT +'px, 0px)';
                } else {
                    diffT += 10;
                    oUl.style.transform = 'translate3d(0px, '+ diffT +'px, 0px)';
                }
            }, 30);
        }
    }

    function addDom() {
        var newDom = null;
        newDom = document.createElement('div');
        newDom.setAttribute('class', 'newDom');
        newDom.style.top = oConTop + 'px';
        newDom.style.display = 'block';
        document.body.insertBefore(newDom, oSchool);
    }

    function delDom() {
        var newDom = document.querySelector('.newDom');
        document.body.removeChild(newDom);
    }

    function getTop(obj) {
        var iTop = 0;
        while(obj) {
            iTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return iTop;
    }
};